Jassif Team Institution

Vue v- বাইন্ড মেকানিজম

আপনি ইতিমধ্যেই দেখেছেন যে একটি মৌলিক Vue কাঠামোতে একটি Vue উদাহরণ থাকে এবং আপনি এটিকে <div id="app"> ট্যাগ থেকে {{ }} বা v-bind পদ্ধতিতে অ্যাক্সেস করতে পারেন।

এই পৃষ্ঠায় আমরা আরও বিস্তারিতভাবে v-bind অ্যালগরিদম ব্যাখ্যা করব।

ভি-বাইন্ড অ্যালগরিদম

ভি-বাইন্ড পদ্ধতি Vue ইনস্ট্যান্সে ডেটাতে একটি এইচটিএমএল অ্যাট্রিবিউট বাঁধাই করার অনুমতি দেয়। এটি বৈশিষ্ট্যের মান পরিবর্তন করা সহজ করে তোলে।

উদাহরণ

একটি <img> ট্যাগের src অ্যাট্রিবিউট মান Vue ইভেন্ট ডেটা অ্যাট্রিবিউট 'url' থেকে নেওয়া হয়েছে:

<img v-bind:src="url">

CSS বাঁধাই

ভি-বাইন্ড পদ্ধতি লাইন কন্টেন্ট স্টাইলিং এবং ক্লাস পরিবর্তনের জন্য ব্যবহার করা যেতে পারে। আমরা সংক্ষিপ্তভাবে এই বিভাগে এটি কিভাবে করতে হবে তা দেখাব এবং পরে এই টিউটোরিয়ালে, CSS বাইন্ডিং পৃষ্ঠায়, আমরা এটি আরও বিশদভাবে ব্যাখ্যা করব।

শৈলী বাঁধুন

Vue-এর সাথে লাইন কন্টেন্ট স্টাইলিং V-bind-এর সাথে Vue-তে স্টাইল অ্যাট্রিবিউট বাইন্ড করে করা হয়।

ভি-বাইন্ড পদ্ধতির মান হিসাবে, আমরা একটি CSS বৈশিষ্ট্য এবং মান সহ একটি জাভাস্ক্রিপ্ট অবজেক্ট লিখতে পারি:

<div v-bind:style="{ fontSize: size }">
  Text example
</div>

<div v-bind:style="{ fontSize: size + 'px' }">
  Text example
</div>

<div v-bind:style="{ 'font-size': size + 'px' }">
  Text example
</div>

<div v-bind:style="{ backgroundColor: 'hsl('+bgVal+',80%,80%)' }">
  Notice the background color on this div tag.
</div>

<div v-bind:style="{ backgroundColor: isImportant ? 'lightcoral' : 'lightgray' }">
  Conditional background color
</div>

ক্লাস বাঁধা

v-bind ক্লাস অ্যাট্রিবিউট পরিবর্তন করতে ব্যবহার করা যেতে পারে।

v-bind:class এর মান একটি পরিবর্তনশীল হতে পারে:

<div v-bind:class="className">
  The class is set with Vue
</div>

v-bind:class-এর মানও একটি অবজেক্ট হতে পারে, যা শুধুমাত্র তখনই কাজ করে যখন ক্লাসের নাম 'true' সেট করা থাকে:

<div v-bind:class="{ myClass: true }">
  The class is set conditionally to change the background color
</div>

যখন v-bind:class-এর মান একটি অবজেক্ট হয়, ক্লাসটি একটি Vue এট্রিবিউটে বরাদ্দ করা যেতে পারে:

<div v-bind:class="{ myClass: isImportant }">
  The class is set conditionally to change the background color
</div>

ভি-বাইন্ডের জন্য শর্টকাট

'v-bind:'-এর শর্টকাট হল ':'।

<div :class="{ impClass: isImportant }">
  The class is set conditionally to change the background color
</div>

বিভ্রান্তি এড়াতে আমরা এই টিউটোরিয়ালে v-bind: সিনট্যাক্স ব্যবহার করব।

ভিউ টিউটোরিয়াল

ব্যায়াম দিয়ে নিজেকে পরীক্ষা করুন

<div ="className">
  The class is set with Vue
</div>